<!--
 * @Author: Bennty
 * @Date: 2024-08-12 09:29:53
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-03 16:28:35
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="半成品-编辑" width="30%" @close="handleClose" destory-on-close>
        <el-form ref="editFormRef" :model="formData" label-width="auto">
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item label="材料大类" label-position="right">
                        <span>半成品</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="材料小类" prop="productSubcategoryType" label-position="right">
                        <el-select v-model="formData.productSubcategoryType">
                            <el-option v-for="item in props.single" :key="item.id" :label="item.subclassName" :value="item.subclassType"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="具体规格" prop="specsDetail" label-position="right">
                    <el-input v-model="formData.specsDetail" placeholder="请输入"></el-input>
                </el-form-item>
                <el-row :gutter="50">
                    <el-col :span="12">
                        <el-form-item label="单价" prop="price" label-position="right">
                            <el-input type="number" v-model="formData.price" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="现有库存" prop="currentInventory" label-position="right">
                            <el-input v-model.number="formData.currentInventory" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="50">
                    <el-col :span="12">
                        <el-form-item label="单位" prop="specsUnit" label-position="right">
                            <el-input v-model="formData.specsUnit" placeholder="默认是 个"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最低库存" prop="lowInventory" label-position="right">
                            <el-input v-model.number="formData.lowInventory" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="50">
                    <el-col :span="12">
                        <el-form-item label="采购冻结" prop="purchaseFreezeInventory" label-position="right">
                            <el-input v-model.number="formData.purchaseFreezeInventory" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="销售冻结" prop="productFreezeInventory" label-position="right">
                            <el-input v-model.number="formData.productFreezeInventory" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="图片上传" prop="image" label-position="right">
                    <el-upload
                        class="upload-demo"
                        ref="uploadRef"
                        drag
                        :action="uploadImgUrl"
                        :headers="headers" 
                        :before-upload="beforePreparedProductsUpload"
                        v-model:file-list="fileList"
                        :auto-upload="true"
                        :on-exceed="handleExceed"
                        :limit="1"
                    >
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                        将文件拖入此处或<em>点击这里上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                                jpg/png 文件不得超过 5MB
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="备注" prop="remark" label-position="right">
                    <el-input type="textarea" v-model="formData.remark" placeholder="请输入" maxlength="128" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="启用状态" prop="status" label-position="right">
                    <el-switch
                        v-model="formData.status"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949; margin-right: 10px"
                        :active-value="'1'"
                        :inactive-value="'0'"
                    />
                    <span v-if="formData.status == 1" :style="{color:'#13ce66'}">启用</span>
                    <span v-else :style="{color:'#ff4949'}">停用</span>
                </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance,UploadInstance, UploadProps,UploadUserFile,UploadRawFile } from 'element-plus';
import { genFileId } from 'element-plus'
import { globalHeaders } from "@/utils/request";
import { updateSemiProductApi } from '@/api/sj/warehouse/productInventory';

const props = defineProps(['visible','data','single']);
const emits = defineEmits(['close','submit']);
const editFormRef = ref<FormInstance>();
const uploadRef = ref<UploadInstance>();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);
const formData = ref({
    productCategoriesType: '半成品',
    productSubcategoryType: undefined,
    specsDetail: undefined,
    price: undefined,
    currentInventory: undefined,
    lowInventory: undefined,
    specsUnit: '个',
    purchaseFreezeInventory: undefined,
    productFreezeInventory: undefined,
    imageUrl: undefined,
    remark: undefined,
    status: 1
});
const supportFileTypes = ['image/jpeg', 'image/png'];

const fileList = ref<UploadUserFile[]>([]);

const handlePreparedProductsSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    console.log(URL.createObjectURL(uploadFile.raw!));
    //@ts-ignore
    formData.value.image = response.data.url;
    console.log(formData.value.imageUrl);

};

const beforePreparedProductsUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (!supportFileTypes.includes(rawFile.type)) {
        ElMessage.error('图片格式与要求不符')
        return false
    } else if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('图片不可超过 5MB!')
        return false
    }
    return true
};

const handleExceed: UploadProps['onExceed'] = (files) => {
    uploadRef.value!.clearFiles();
    const file = files[0] as UploadRawFile;
    file.uid = genFileId();
    uploadRef.value!.handleStart(file);
    uploadRef.value!.submit();
};

watch(()=>props.data,(newData)=>{
    formData.value = newData;
    fileList.value = [{name: 'image1',url: props.data.imageUrl}];
});

const handleSubmit = async () => {
    const inventoryMoney = (formData.value?.currentInventory || 0) * (formData.value?.price || 0);
    const submitData = {
        ...formData.value,
        //@ts-ignore
        imageUrl: fileList.value[0]?.response?.data?.url,
        inventoryMoney: inventoryMoney
    };
    const { code } = await updateSemiProductApi(submitData);
    if(code == 200){
        emits('submit',true);
        handleClose();
    }else{
        emits('submit',false)
    }
};

const handleClose = ()=>{
    emits('close');
    editFormRef.value?.resetFields();
    uploadRef.value?.clearFiles();
};
</script>

<style lang="scss" scoped>
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>